<template>
  <div class="version-switcher" :class="{ 'visible': visible }">
    <div class="switcher-button" @click="toggleVisible">
      <van-icon :name="visible ? 'cross' : 'upgrade'" size="20" />
    </div>
    <div class="switcher-panel">
      <div class="switcher-title">版本选择</div>
      <div class="switcher-description">点击下方按钮选择您喜欢的版本</div>
      <div class="switcher-options">
        <div 
          class="switcher-option" 
          :class="{ 'active': !usingNewVersion }"
          @click="switchVersion(false)"
        >
          <div class="option-icon">
            <van-icon name="shop-o" size="24" />
          </div>
          <div class="option-name">经典版</div>
          <div class="option-desc">传统布局，功能完整</div>
        </div>
        <div 
          class="switcher-option" 
          :class="{ 'active': usingNewVersion }"
          @click="switchVersion(true)"
        >
          <div class="option-icon">
            <van-icon name="phone-o" size="24" />
          </div>
          <div class="option-name">全新版</div>
          <div class="option-desc">移动优先，交互升级</div>
          <div class="option-badge">推荐</div>
        </div>
      </div>
      <van-button 
        block 
        type="primary"
        class="confirm-button"
        :loading="switching"
        @click="confirmSwitch"
      >
        确认切换
      </van-button>
    </div>
  </div>
</template>

<script>
import { ref, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Icon, Button, Toast } from 'vant'

export default {
  name: 'VersionSwitcher',
  components: {
    vanIcon: Icon,
    vanButton: Button
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const visible = ref(false)
    const usingNewVersion = ref(false)
    const selectedNewVersion = ref(false)
    const switching = ref(false)
    
    // 切换面板显示状态
    const toggleVisible = () => {
      visible.value = !visible.value
    }
    
    // 选择版本
    const switchVersion = (isNew) => {
      selectedNewVersion.value = isNew
    }
    
    // 确认切换版本
    const confirmSwitch = () => {
      if (selectedNewVersion.value === usingNewVersion.value) {
        Toast('您已经在使用该版本')
        visible.value = false
        return
      }
      
      switching.value = true
      
      // 存储用户选择
      localStorage.setItem('useNewVersion', selectedNewVersion.value)
      
      // 根据当前路由确定目标路由
      const currentPath = route.path
      let targetPath = ''
      
      if (selectedNewVersion.value) {
        // 切换到新版本
        if (currentPath === '/') {
          targetPath = '/new/home'
        } else if (currentPath.startsWith('/apps')) {
          targetPath = '/new/apps'
        } else if (currentPath.startsWith('/profile')) {
          targetPath = '/new/profile'
        } else if (currentPath.startsWith('/asset') || 
                  currentPath.startsWith('/finance') || 
                  currentPath.startsWith('/material')) {
          targetPath = '/new/apps'  // 从功能模块跳转到新版应用中心
        } else {
          targetPath = '/new/home' // 默认去首页
        }
      } else {
        // 切换到旧版本
        if (currentPath.includes('/new/home')) {
          targetPath = '/'
        } else if (currentPath.includes('/new/apps')) {
          targetPath = '/apps'
        } else if (currentPath.includes('/new/profile')) {
          targetPath = '/profile'
        } else {
          targetPath = '/' // 默认去首页
        }
      }
      
      // 延迟执行，显示加载状态
      setTimeout(() => {
        router.push(targetPath)
        switching.value = false
        visible.value = false
        usingNewVersion.value = selectedNewVersion.value
        Toast(selectedNewVersion.value ? '已切换到全新版' : '已切换到经典版')
      }, 800)
    }
    
    onMounted(() => {
      // 从本地存储读取用户偏好
      const savedPreference = localStorage.getItem('useNewVersion')
      usingNewVersion.value = savedPreference === 'true'
      selectedNewVersion.value = usingNewVersion.value
      
      // 检查当前路径是否与版本匹配
      const isNewVersionRoute = route.path.startsWith('/new')
      if (usingNewVersion.value && !isNewVersionRoute) {
        // 用户偏好新版本但当前在旧版本页面
        router.push('/new/home')
      } else if (!usingNewVersion.value && isNewVersionRoute) {
        // 用户偏好旧版本但当前在新版本页面
        router.push('/')
      }
    })
    
    // 监听路由变化
    watch(() => route.path, (newPath) => {
      // 根据路径更新当前版本状态
      usingNewVersion.value = newPath.startsWith('/new')
      selectedNewVersion.value = usingNewVersion.value
    })
    
    return {
      visible,
      usingNewVersion,
      switching,
      toggleVisible,
      switchVersion,
      confirmSwitch
    }
  }
}
</script>

<style scoped>
.version-switcher {
  position: fixed;
  right: 16px;
  bottom: 80px;
  z-index: 1000;
}

.switcher-button {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background-color: #1A7BB9;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.switcher-panel {
  position: fixed;
  left: 5%;
  right: 5%;
  bottom: 100px;
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(150%);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 999;
}

.visible .switcher-panel {
  transform: translateY(0);
  opacity: 1;
}

.switcher-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}

.switcher-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  text-align: center;
}

.switcher-options {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.switcher-option {
  flex: 1;
  background-color: #f5f7fa;
  border-radius: 12px;
  padding: 16px;
  position: relative;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.switcher-option.active {
  border-color: #1A7BB9;
  background-color: #E3F2FD;
}

.option-icon {
  color: #1A7BB9;
  margin-bottom: 8px;
}

.option-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.option-desc {
  font-size: 12px;
  color: #666;
}

.option-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #FF9800;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
}

.confirm-button {
  border-radius: 8px;
}
</style> 